<template>
  <!--选择商务人员-->
  <el-card v-if="'财务角色'" class="bottom-line">
    <el-row class="flex-box confirm" type="flex" justify="space-between" align="top">
      <el-col :lg="11" :md="11" :sm="24">
        <div class="h3 pdb15 bold">
          商务人员列表
        </div>
        <div>
          <div class=" subtitle ">
            发送给分组:
          </div>
          <el-card class="select-box">
            <!-- 多选分组 -->
            <el-checkbox-group v-model="selectedGroup" size="small">
              <el-checkbox v-for="(item,index) in groupList" :label="item" :key="index" border>
                {{ item.name }}
              </el-checkbox>
            </el-checkbox-group>
            <!-- 多选分组 end-->

          </el-card>
        </div>
        <div>
          <div class=" subtitle pdt15">
            发送给成员:
            <el-input
              v-model="leftKey"
              size="mini"
              placeholder="输入成员搜索"
              class="inner-input"
              label="发送给成员"
            />
          </div>
          <el-card class="select-box">

            <!-- 多选人员 -->
            <el-checkbox-group v-model="selectedMember" size="small">
              <template v-for="(item,index) in filteredMemberList">
                <el-checkbox
                  :label="item"
                  :key="index"
                  border
                  class="mb5">
                  {{ item.name }}
                </el-checkbox>
              </template>

            </el-checkbox-group>
            <!-- 多选人员 end-->

          </el-card>
        </div>
      </el-col>
      <el-col :lg="11" :md="11" :sm="24" class="confirm">
        <div class="h3 pdb15 bold">
          已选择商务
        </div>
        <div>
          <div class=" subtitle ">
            发送给分组:
          </div>
          <el-card class="select-box">
            <el-checkbox-group v-model="selectedGroup" size="small">
              <el-checkbox
                v-for="(item,index) in selectedGroup"
                :label="item"
                :key="index"
                class="mb5"
                border>
                {{ item.name }}
              </el-checkbox>
            </el-checkbox-group>
          </el-card>
        </div>
        <div>
          <div class=" subtitle pdt15">
            发送给成员:
            <el-input
              v-model="rightKey"
              size="mini"
              placeholder="输入成员搜索"
              class="inner-input"
              label="发送给成员"/>
          </div>
          <el-card class="select-box">
            <el-checkbox-group v-model="selectedMember" size="small">
              <el-checkbox
                v-for="(item,index) in filteredSelectedMember"
                :label="item"
                :key="index"
                border>
                {{ item.name }}
              </el-checkbox>
            </el-checkbox-group>
          </el-card>
        </div>
      </el-col>
    </el-row>
    <el-row type="flex" justify="end" class="pdt15">
      <el-button v-if="!$route.query.id" type="primary" size="small" @click="sendMessage">创建对账单并发送</el-button>
      <el-button v-else type="primary" size="small" @click="sendMessage">选择并再次发送</el-button>
    </el-row>
    <el-col :lg="11" :md="11" :sm="12" class="confirm">
      <div>
        <div class=" subtitle ">
          已发送过的成员:
        </div>
        <el-card>
          <el-checkbox-group v-model="selectedMember" size="small">
            <el-checkbox v-for="(item,index) in claimedMember" :label="item" :key="index" border>
              {{ item.name }}({{ item.status }})
            </el-checkbox>
          </el-checkbox-group>

        </el-card>
      </div>

    </el-col>
  </el-card>
</template>

<script>
export default {
  name: 'SendMessage',
  props: {
    claimedMember: {
      type: Array,
      default: () => { return [] }
    }
  },
  data() {
    return {
      // 发送给分组

      // 筛选成员
      leftKey: '',
      rightKey: '',

      // 左边
      groupList: [],
      memberList: [
        {
          name: '成员一',
          id: '1',
          status: '未认领'
        },
        {
          name: '成员二',
          id: '2'
        },
        {
          name: '成员三',
          id: '3'
        },
        {
          name: '成员四',
          id: '4'
        }
      ],

      // 右边
      selectedGroup: [],
      selectedMember: [],

      // 发送过的成员
      sentGroup: []
    }
  },
  computed: {

    filteredMemberList() {
      return this.filter(this.memberList, 'name', this.leftKey)
    },
    filteredSelectedMember() {
      return this.filter(this.selectedMember, 'name', this.rightKey)
    }
  },
  watch: {
    claimedMember(val1) {
      console.log(val1, 'val1')
      this.memberList.forEach((item, index) => {
        val1.forEach((item1, index1) => {
          if (item1.id === item.id) {
            this.memberList.splice(index, 1, item1)
          }
        })
      })
    },
    selectedMember(val) {
      this.$emit('select', val)
    }
  },
  mounted() {
    this.getBusinessList()
  },
  methods: {
    filter(origin, key, keyword,) {
      if (!keyword || origin.length === 0) {
        return origin
      } else {
        const list = origin.filter(item => {
          console.log(item[key].indexOf(keyword))
          return item[key].indexOf(keyword) > -1
        })
        return list
      }
    },

    sendMessage() {
      this.$emit('sendMessage')
    },
    // 获取商务列表
    getBusinessList() {
      this.$get('action/WxUserCtrl/staffinfo')
        .then(res => {
          const list = []
          if (res.data) {
            res.data.staffinfotree.forEach(item => {
              list.push({
                name: item.re_name,
                id: item.id
              })
            })
          }
          this.memberList = list || []
        })
    },

    onSelectedBusiness(val) {
      this.$emit('onSelectedBusiness', val)
    }

  }
}
</script>

<style scoped>
.mb5{
    margin-bottom:5px;
}
    .select-box{
        max-height: 300px;
        overflow-y: auto;
    }
</style>
